<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>7-案例-交通大学</title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			a{
				text-decoration: none;
			}
			body{
				line-height: 1;
			}
			/* 978,198 */
			.box{
				width:978px;
				height:198px;
				border:1px solid red;
				margin:30px auto;
				padding: 27px 29px 0px 29px;
				box-sizing: border-box;
			}
			.news{
				color:#b22c25;
				font-size:18px;
				font-weight:bold;
				padding-bottom:14px;
				border-bottom: 3px solid #b22c25;
				/* 向左浮动 */
				float:left;
			}
			div.title{
				border-bottom:1px solid #b3b3b3;
				/*在父级中左右浮动的模块导致父类盒子没有适应内容的高度*/
				overflow:hidden;
			}
			.title .location{
				/* 向右浮动 */
				float:right;
				color:#888888;
			}
			.title .location a{
				font-size:12px;
				color:#888888;
			}
			.word{
				font-size:23px;
				color:#000000;
				font-weight: 700;
				margin-top:41px;
				/*文字居中*/
				text-align:center;
				padding-bottom:13px;
				border-bottom:1px dashed #717171;
			}
			.box .sources{
				padding-bottom:13px;
				border-bottom:1px dashed #717171;
				text-align:center;
				margin-top:15px;
			}
			.box .sources span{
				font-size:11px;
				color:#666666;
				margin-right: 36px;
			}
			.box .sources span.last{
				/*将右间距设置为0*/
				margin-right:0;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<!-- 导航 -->
			<div class="title">
				<span class="news">主页新闻</span>
				<span class="location">
					<a href="#">当前位置：</a>
					<a href="#">新闻网首页</a>>
					<a href="#">主页新闻</a>>
					<a href="#">正文</a>
				</span>
			</div>
			<!-- 导航end -->
			<!-- 标题 -->
			<div class="word">
				【陕西高教】燕连福：抓好三个“融入”推动研究生思政教育高质量发展
			</div>
			<!-- 标题end -->
			<div class="sources">
				<span>来源：陕西高教</span>
				<span>日期：2022-03-18 11:25</span>
				<span class="last">浏览量：489</span>
			</div>
		</div>
		
	</body>
</html>
